<template>
  <div class="login">
    <div class="box">
      <h2>WR管理系统</h2>
      <el-form
        size="small"
        ref="FormRef"
        style="max-width: 600px"
        :model="formData"
        status-icon
        :rules="rules"
        label-width="40px"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            class="txt"
            size="large"
            v-model.number="formData.username"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            class="txt"
            size="large"
            v-model="formData.password"
            type="password"
            clearable
            show-password
          />
        </el-form-item>
        <div class="button">
          <el-form-item>
            <el-button size="large" type="primary" @click="submitForm(FormRef)">
              登录
            </el-button>
            <el-button size="large" @click="resetForm(FormRef)">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";

//导入登录API
import { $getOneUser, $Login } from "../api/admin.ts";

//导入路由器
import { useRouter } from "vue-router";

//导入user Store
import { useUserStore } from "../store/user.ts";
let useUser = useUserStore();

//返回路由器对象
const Router = useRouter();
//定义一个
const FormRef = ref<FormInstance>();

const formData = reactive({
  username: "",
  password: "",
});

onMounted(() => {
  if (useUser.user.isLogin) {
    Router.push("/index");
  }
});

//验证账号
const validateLoginUser = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else {
    callback();
  }
};
//验证密码
const validateLoginPwd = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};

//验证对象
const rules = reactive<FormRules<typeof formData>>({
  username: [{ validator: validateLoginUser, trigger: "blur" }],
  password: [{ validator: validateLoginPwd, trigger: "blur" }],
});

//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid: boolean) => {
    if (valid) {
      let ret = await $Login(formData);
      if (ret) {
        // let user = $getOneUser({ username: formData.username });
        let user = { username: "admin", isLogin: true };
        useUser.setUser(user);
        sessionStorage.setItem("User", JSON.stringify(user));
        Router.push("/index");
      }
    } else {
      return false;
    }
  });
};

//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
      127deg,
      rgba(20, 35, 52, 0.8),
      rgba(43, 115, 175, 0) 71%
    ),
    linear-gradient(217deg, rgba(78, 124, 161, 0.8), rgba(15, 20, 35, 0) 89%),
    linear-gradient(336deg, rgba(28, 41, 56, 0.8), rgba(147, 181, 207, 0) 100%);
  //background: linear-gradient(217deg, #577578, #617172, #2a6e74d5);
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 410px;
    height: 320px;
    border: 3px solid #9c9c9c;
    padding: 20px;

    .button {
      margin-top: 30px;
      margin-left: -30px;
      display: flex;
      justify-content: center;
    }
    h2 {
      font-weight: 100;
      color: #fff;
      letter-spacing: 13px;
      font-size: 50px;
      text-align: center;
      margin-top: 20px;
      font-family: zhou;
      margin-bottom: 30px;
    }

    :deep(.el-form-item__label) {
      margin-top: 8px;
      color: #ffffff;
      font-size: 20px;
      width: 60px !important;
    }
    :deep(.txt) {
      font-size: 25px;
      width: 300px;
    }
  }
}
</style>
